<template>
    <div class="P-parents page">
        <div class="content">
            <PlatformCrumb back="教练资料">
            </PlatformCrumb>
            <div class="p-parcoach-detail my-deta-con">
                <p class="title">基本资料</p>
                <el-form ref="form" :model="detailForm" label-width="120px">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="照片">
                                <div class="uploadimg">
                                    <img v-if="detailForm.imgs" :src="detailForm.imgs|filtersImg" alt=""
                                    >
                                    <el-upload
                                            ref='upload'
                                            :action='imgupload'
                                            class="upload-demo"
                                            accept="image/jpeg,image/gif,image/png"
                                            :show-file-list="false"
                                            name="file"
                                            list-type="picture-card"
                                            :on-success="handleAvatarSuccess"
                                            multiple>
                                        <i class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="机构">
                                <el-input v-model="detailForm.mechanismName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="姓名">
                                <el-input v-model="detailForm.name"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="身份证号码">
                                <el-input v-model="detailForm.leaderNo"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="邮箱">
                                <el-input v-model="detailForm.mail"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="联系电话">
                                <el-input v-model="detailForm.phone"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="联系地址">
                                <el-input v-model="detailForm.address"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="最高学历">
                                <el-select v-model="detailForm.xl" placeholder="请选择">
                                    <el-option v-for="(item,index) in optionsXL" :key="index" :value="item.dictNo"
                                               :label="item.dictName"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="毕业院校">
                                <el-input v-model="detailForm.graduatedFrom"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="教练等级">
                                <el-select v-model="detailForm.coachLevel" placeholder="请选择">
                                    <el-option v-for="(item,index) in optionsJLDJ" :key="index" :value="item.dictNo"
                                               :label="item.dictName"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="语言能力">
                                <el-select v-model="detailForm.yy" placeholder="请选择">
                                    <el-option v-for="(item,index) in optionsYYNL" :key="index" :value="item.dictNo"
                                               :label="item.dictName"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="履历">
                                <div>
                                    <el-button type="primary" @click="addlvl">增加</el-button>
                                </div>
                                <div v-if="addlvlshow">
                                    <el-col class="mb20" :span="24">
                                        <el-form-item label="开始时间">
                                            <el-date-picker
                                                    v-model="Resume.startTime"
                                                    type="date"
                                                    placeholder="请选择开始时间">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="mb20" :span="24">
                                        <el-form-item label="结束时间">
                                            <el-date-picker
                                                    v-model="Resume.endTime"
                                                    type="date"
                                                    placeholder="请选择结束时间">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="mb20" :span="24">
                                        <el-form-item label="经历">
                                            <el-input v-model="Resume.info" placeholder="请输入经历"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="mb20" :span="24">
                                        <el-form-item label="职位">
                                            <el-input v-model="Resume.position" placeholder="请输入职位"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="mb20" :span="24">
                                        <el-form-item label="地址">
                                            <el-input v-model="Resume.address" placeholder="请输入地址"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col class="mb20" :span="24">
                                        <el-form-item>
                                            <div class="disfc">
                                                <el-button v-if="Resume.id==0" type="primary" @click="addlvl2">确认
                                                </el-button>
                                                <el-button v-else type="primary" @click="editlvl2">确认</el-button>
                                                <el-button @click="quetlvl">取消</el-button>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </div>

                                <el-table
                                        class="mt20"
                                        v-if="Resumelist.length!=0"
                                        :data="Resumelist"
                                        border
                                        style="width: 100%">
                                    <el-table-column
                                            prop="startTime"
                                            label="开始时间"
                                            width="150">
                                        <template slot-scope="scope">
                                            <span>{{scope.row.startTime|filtersdata}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="endTime"
                                            label="结束时间"
                                            width="120">
                                        <template slot-scope="scope">
                                            <span>{{scope.row.endTime|filtersdata}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                            prop="info"
                                            label="经历"
                                            width="120">
                                    </el-table-column>
                                    <el-table-column
                                            prop="position"
                                            label="职位"
                                            width="120">
                                    </el-table-column>
                                    <el-table-column
                                            prop="address"
                                            label="地址"
                                            width="300">
                                    </el-table-column>
                                    <el-table-column
                                            fixed="right"
                                            label="操作"
                                            width="100">
                                        <template slot-scope="scope">
                                            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑
                                            </el-button>
                                            <el-button @click="deleteClick(scope.row.id)" type="text" size="small">删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="青训座右铭">
                                <el-input v-model="detailForm.motto"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="微信">
                                <el-input v-model="detailForm.weChatNo"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="鞋码">
                                <el-input v-model="detailForm.shoeSize"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="旧密码">
                                <el-input v-model="detailForm.passWord"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="新密码">
                                <el-input v-model="detailForm.newPassword"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="确认密码">
                                <el-input v-model="detailForm.newPassword1"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <div class="savebut3">
                                <el-button @click="editDetail" type="primary">保存</el-button>
                            </div>
                        </el-col>

                    </el-row>
                </el-form>
            </div>
        </div>
    </div>

</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import comment from "@/components/coach/comment.vue";
    import wound from "@/components/coach/wound.vue";
    import {baseImgPath, basefile, imgupload} from '@/config/env.js';
    import {mapActions} from 'vuex'

    function formatDate(timeStamp, type = 'Y-M-D H:I:S', auto = false) {
        let time = (timeStamp + '').length === 10 ? new Date(parseInt(timeStamp) * 1000) : new Date(parseInt(timeStamp));
        let _year = time.getFullYear();
        let _month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
        let _date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        let _hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        let _minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        let _secconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        let formatTime = '';
        let distinctTime = new Date().getTime() - time.getTime();

        if (auto) {
            if (distinctTime <= (1 * 60 * 1000)) {
                // console.log('一分钟以内，以秒数计算');
                let _s = Math.floor((distinctTime / 1000) % 60);
                formatTime = _s + '秒前';
            } else if (distinctTime <= (1 * 3600 * 1000)) {
                // console.log('一小时以内,以分钟计算');
                let _m = Math.floor((distinctTime / (60 * 1000)) % 60);
                formatTime = _m + '分钟前';
            } else if (distinctTime <= (24 * 3600 * 1000)) {
                // console.log('一天以内，以小时计算');
                let _h = Math.floor((distinctTime / (60 * 60 * 1000)) % 24);
                formatTime = _h + '小时前';
            } else if (distinctTime <= (30 * 24 * 3600 * 1000)) {
                let _d = Math.floor((distinctTime / (24 * 60 * 60 * 1000)) % 30);
                formatTime = _d + '天前';
                // console.log('30天以内,以天数计算');
            } else {
                // 30天以外只显示年月日
                formatTime = _year + '-' + _month + '-' + _date;
            }
        } else {

            switch (type) {
                case 'Y-M-D H:I:S':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I:S zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日  ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes;
                    break;
                case 'Y-M-D H':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours;
                    break;
                case 'Y-M-D':
                    formatTime = _year + '-' + _month + '-' + _date;
                    break;
                case 'Y-M-D zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日';
                    break;
                case 'Y-M':
                    formatTime = _year + '-' + _month;
                    break;
                case 'Y':
                    formatTime = _year;
                    break;
                case 'M':
                    formatTime = _month;
                    break;
                case 'D':
                    formatTime = _date;
                    break;
                case 'H':
                    formatTime = _hours;
                    break;
                case 'I':
                    formatTime = _minutes;
                    break;
                case 'S':
                    formatTime = _secconds;
                    break;
                default:
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
            }
        }
        // 返回格式化的日期字符串
        return formatTime;
    }

    export default {
        components: {
            PlatformCrumb,
            wound,
            comment
        },
        data() {
            return {
                id: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0,
                detailForm: {
                    name: '',
                    age: '',
                    resumes: []
                },
                Resumelist: [],
                Resume: {
                    address: '',
                    endTime: '',
                    info: '',
                    position: '',
                    startTime: '',
                    id: 0,
                    userId: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
                },
                radio: '',
                options: '',
                optionsKC: '',
                optionsJQ: '',
                optionsFG: '',
                centerDialogVisible: false,
                imgupload: imgupload,
                shangbinglist: [],
                sbls: {
                    "id": 0,
                    "name": "",
                    "playerId": this.$route.query.id,
                    "remarks": "",
                    "type": 0,
                    'imgs': ''
                },
                sbztlist: [
                    {
                        label: '轻度',
                        value: 0
                    }, {
                        label: '中度',
                        value: 1
                    }, {
                        label: '重度',
                        value: 2
                    }],
                scorelist: [],
                scorelist2: {
                    "list": [],
                    "playerId": this.$route.query.id
                },
                indicator: [],
                indicator2: [],
                optionsXL: [],
                optionsJLDJ: [],
                optionsYYNL: [],
                addlvlshow: false,

            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'getPlayerDetail',
                'fetchSelectList',
                'editPlayerInfo',
                'woundLogsgetList',
                'woundLogsedit',
                'woundLogsget',
                'woundLogsadd',
                'abilityaddScore',
                'abilitygetList',
                'addGroup',
                'coacheditMyInfo',
                'coachget',
                'fetchMydate',
                'resumeadd',
                'resumeedit',
                'resumegetList',
            ]),

            onCancel() {
                this.$router.back()
            },
            seedetail() {
                this.centerDialogVisible = true
            },
            addlvl() {
                this.addlvlshow = true
            },
            handleClick(e) {
                this.Resume = e
                this.addlvlshow = true
            },
            deleteClick(e) {
                this.resumeedit({
                    id: e,
                    status: 1
                }).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getresumegetList()
                    }
                })
            },
            addlvl2() {
                this.resumeadd(this.Resume).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '增加成功',
                            type: 'success'
                        })
                        this.getresumegetList()
                        this.addlvlshow = false
                        this.Resume = {
                            address: '',
                            endTime: '',
                            info: '',
                            position: '',
                            startTime: '',
                            id: 0,
                        }
                    }
                })
            },
            editlvl2() {
                this.resumeedit(this.Resume).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '编辑成功',
                            type: 'success'
                        })
                        this.getresumegetList()
                        this.addlvlshow = false
                        this.Resume = {
                            address: '',
                            endTime: '',
                            info: '',
                            position: '',
                            startTime: '',
                            id: 0,
                        }
                    }
                })
            },
            quetlvl() {
                this.addlvlshow = false
                this.Resume = {
                    address: '',
                    endTime: '',
                    info: '',
                    position: '',
                    startTime: '',
                    id: 0,
                }
            },
            open() {
                this.$prompt('请输入分组名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    this.addGroupfz(value)
                }).catch(() => {

                });
            },
            handleAvatarSuccess(res, file) {
                console.log(res);
                console.log(file);
                this.detailForm.imgs = res.data.path
                // this.addMatchdata.imgs = URL.createObjectURL(file.raw);
            },
            // 增加伤病
            woundLogsadd2() {
                var that = this;
                this.sbls.id = 0
                this.woundLogsadd(this.sbls).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '增加成功',
                            type: 'success'
                        })
                        this.sbls = {
                            "id": 0,
                            "name": "",
                            "playerId": this.$route.query.id,
                            "remarks": "",
                            "type": 0,
                        }
                        that.getwoundLogsgetList()
                    }
                })
            },
            // 编辑伤病
            woundLogsedit2() {
                var that = this;
                this.woundLogsedit(this.sbls).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        this.sbls = {
                            "id": 0,
                            "name": "",
                            "playerId": this.$route.query.id,
                            "remarks": "",
                            "type": 0,
                        }
                        that.getwoundLogsgetList()
                    }
                })
            },
            fetchDetail() {
                const id = this.id
                this.fetchMydate({id}).then(res => {
                    const {code, data} = res
                    if (code === 200 && data) {
                        this.detailForm = data
                    }
                })
            },
            getresumegetList() {
                const id = this.id
                this.resumegetList({id}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.Resumelist = list || []
                    }
                })
            },
            // 移除分组
            movegroup() {
                this.detailForm.grouping = 0
            },
            getSelect() {
                this.fetchSelectList({type: 'FZ'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.options = list || []
                    }
                })
            },
            getSelectKC() {
                this.fetchSelectList({type: 'CT'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsKC = list || []
                    }
                })
            },
            getSelectJQ() {
                this.fetchSelectList({type: 'JQ'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsJQ = list || []
                    }
                })
            },
            getSelectXL() {
                this.fetchSelectList({type: 'XL'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsXL = list || []
                    }
                })
            },
            getSelectYYNL() {
                this.fetchSelectList({type: 'YYNL'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsYYNL = list || []
                    }
                })
            },
            getSelectJLDJ() {
                this.fetchSelectList({type: 'JLDJ'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsJLDJ = list || []
                    }
                })
            },
            getwoundLogsgetList() {
                this.woundLogsgetList(
                    {"id": this.id}
                ).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.shangbinglist = list || []
                    }
                })
            },
            getSelectFG() {
                this.fetchSelectList({type: 'FG'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsFG = list || []
                    }
                })
            },
            editDetail() {
                this.detailForm.age = Number(this.detailForm.age)
                this.coacheditMyInfo(this.detailForm).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                    }
                })
            },
            // 获取评分
            getabilityaddScore() {
                this.abilityaddScore(this.scorelist2).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        this.getabilitygetList()
                    }
                })
            },
            // 添加分组
            addGroupfz(e) {
                this.addGroup({name: e}).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '新增成功',
                            type: 'success'
                        })
                        this.getSelect()
                    }
                })
            },
            getchar() {
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                let data = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'right',
                        y: 'bottom',
                        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    polar: [
                        {indicator: this.indicator}
                    ],
                    calculable: true,
                    series: [
                        {
                            name: '预算 vs 开销（Budget vs spending）',
                            type: 'radar',
                            data: [
                                {
                                    value: this.indicator2,
                                    name: '速度'
                                }
                            ]
                        }
                    ]
                };
                myChart.setOption(data);
            },
        },
        filters: {
            filterstype: function (type, data) {
                for (var i = 0; i < data.length; i++) {
                    if (type == data[i].value) {
                        return data[i].label
                    }
                }
            },
            filtersImg: function (img) {
                return basefile + img
            },
            filtersdata: function (e) {
                return formatDate(e, 'Y-M-D')
            },
        },
        computed: {
            id() {
                return this.$route.query.id
            }
        },

        created() {
            this.fetchDetail()
            this.getSelectXL()
            this.getSelectJLDJ()
            this.getSelectYYNL()
            this.getresumegetList()
        },

        mounted() {
            // this.getchar()
        }

    }
</script>


<style scoped>
    @import url("P-coach.css");

    .display-flex-column img {
        width: 180px;
        height: 240px;

    }

    .display-flex-column {
        margin-right: 100px;
    }

    .el-rate__icon {
        font-size: 22px;
    }

    .star-rate {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .savebut3 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    .uploadimg {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

    }

    .uploadimg img {
        margin-right: 20px;
    }

    .mb20 {
        margin-bottom: 20px;
    }

    .disfc {
        display: flex;
        justify-content: flex-start;
        align-items: center;

    }

    .disfc .el-button {
        margin-left: 120px;
    }
</style>
<style>

    button {
        height: auto !important;
    }

    .mt20 {
        margin-top: 20px;
    }
</style>
